<template>
	<view class="lineContent">
		<div ref="lineChart" class="lineDiv" style="width:100vw; height: 300px;"></div>
	</view>
</template>

<script>
	import * as echarts from 'echarts';

	export default {
		props: {
			tid: {
				type: Number,
				default: false,

			}
		},
		mounted() {
			// this.getGraph()
			// this.initLineChart();
		},
		methods: {
			initLineChart(ValData) {
				const chartDom = this.$refs.lineChart;
				const myChart = echarts.init(chartDom);
				const option = {
					animation: false,
					title: {
						// title为标题部分，有一级标题text，二级标题subtext。这里我们使用二级标题，再修改一下这个二级标题的位置即可出现我们想要的效果了，当然样式也可以通过title.subtextStyle去配置
						subtext: "得分率（%）",
						left: 0, // 距离左边位置
						top: 16, // 距离上面位置
						subtextStyle: { // 设置二级标题的样式
							color: "#baf"
						},
					},
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						type: 'category',
						// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
						data: ['单词跟读', '听说模考', '报听写', '线上作答', '课文跟读'],
						axisLabel: {
							fontSize: 10
						},
					},
					yAxis: {
						type: 'value',
					},
					series: [{
						data: ValData,
						type: 'line',
						smooth: true,
						areaStyle: {
							normal: {
								color: 'lightblue'
							}
						}
					}]
				};

				myChart.setOption(option);
			},

			getGraph() {
				var that = this
				var data = {
					// id: 8,
					id: that.tid
				}
				that.$post('new_homework/teacher_homework_detail_analysis', data).then(res => {
					// console.log('作业详情-作业报告-题型分析2', res);
					if (res.code != 0) {
						var myObject = res.data.question_chart
						var keys = []
						var values = []
						keys = Object.keys(myObject);
						values = Object.values(myObject);
						// console.log('keys', keys)
						// values = values.splite(1, 2)					

						// console.log('values', values)

						for (let i = 0; i < values.length; i++) {
							// console.log('values', values[i])
							values[i] = parseFloat(values[i].replace('%', ''))
						}

						// console.log('values33', values)
						this.initLineChart(values);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
		}
	};
</script>
<style scope>
	.lineContent {
		margin-left: 30rpx;
	}

	.lineDiv,
	.lineDiv>div,
	.lineDiv>div>canvas {
		width: 100% !important;
		/* background: orange; */
		/* padding: 30rpx; */
	}

	/* .container {
		display: flex;
		flex-direction: column;
		/* align-items: center; 
		justify-content: center;
		background-color: #ffffff;
	}

	.chart-container {
		 height: 200px;
	}*/
</style>

<!-- <template>
	<view class="">
		777777777
	</view>
</template>

<script>
</script>

<style>
</style>
 -->
